<template>
  <div>
    <!-- 应用配置表单 -->
    <el-form ref="configForm" :model="configForm.app" :rules="rules">
      <el-row :gutter="32">
        <el-col :span="12">
          <el-form-item label="应用名称" prop="name">
            <el-input v-model="configForm.app.name" placeholder="请输入名称" />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="联系人" prop="contact">
            <el-input v-model="configForm.app.contact" placeholder="请输入联系人，存在多个联系人请用'、'分隔" />
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-form-item label="联系电话" prop="mobile">
          <el-input v-model="configForm.app.mobile" placeholder="请输入联系电话" />
        </el-form-item>
      </el-row>
      <el-row>
        <el-form-item label="接入原因" prop="remark">
          <el-input v-model="configForm.app.remark" placeholder="请输入原因" type="textarea" />
        </el-form-item>
      </el-row>
    </el-form>
    <el-container>
      <!-- 接口模块目录 -->
      <el-aside width="300px" :class="{ aside_main_show: !asideStatus }">
        <el-row>
          模块目录
        </el-row>
        <el-row>
          <el-input v-model="filterText" suffix-icon="el-icon-search" placeholder="请输入" />
        </el-row>
        <el-row>
          <el-tree
            ref="tree"
            v-loading="loading1"
            class="filter-tree"
            :data="contentsData"
            :filter-node-method="filterNode"
            @node-click="handleNodeClick"
            :props="setProps"
          >
            <span slot-scope="{ node, data }">
              <i v-if="data.children.length == 0" class="el-icon-folder" />
              <i v-else class="el-icon-folder-opened" />
              <span style="margin-left: 10px">{{ node.label }}</span>
            </span>
          </el-tree>
        </el-row>
      </el-aside>
      <!-- 接口数据表格 -->
      <el-main>
        <!-- aside侧边栏按钮 -->
        <div class="aside_open_close" style="left: -16px;top: 40%;" @click="asideChange">
          <i class="el-icon-arrow-left" v-if="asideOpen" />
          <i class="el-icon-arrow-right" v-else />
        </div>
        <el-table
          border
          ref="table"
          v-loading="loading2"
          max-height="500px"
          style="position: relative; top: -60px;"
          :data="tableData"
          :row-key="getRowKeys"
          :default-sort="{prop: 'id', order: 'ascending'}"
          @selection-change="handleSelectionChange"
        >
          <el-table-column type="selection" :reserve-selection="true" width="50" />
          <el-table-column label="接口名称" align="left" prop="apiName" />
          <el-table-column label="请求接口地址" align="left" prop="requestUrl" />
        </el-table>
        <!--下面展示总共条数和切换页面-->
        <div class="block">
          <el-pagination
            v-show="total > 0"
            background
            layout="total, prev, pager, next, sizes"
            :total="total"
            :page-sizes="[10, 20, 30, 40, 50]"
            :current-page.sync="pageForm.pageNum"
            :page-size="pageForm.pageSize"
            @pagination="getInfoData"
            @current-change="handleCurrentChange"
            @size-change="handleSizeChange"
          />
        </div>
      </el-main>
    </el-container>
    <div slot="footer">
      <el-button @click="cancel">取 消</el-button>
      <el-button type="primary" @click="submitForm">保 存</el-button>
    </div>
  </div>
</template>
<script>
import { listModule, listInfo, getInfo, getConfig, addConfig, editConfig } from '@/api/system/outapi/manage'

export default {
  props: ['configIds','showDia'],
  data() {
    // 表单校验数据类型
    const isNum = (rule, value, callback) => { // 参数顺序必须如
      let reg = /^[0-9]{11}$/;
      if (reg.test(value)) {
        callback()
      } else {
        callback(new Error("必须为11位整数"))
      }
    }
    return {
      num: 0, // 同步控制
      loading1: false, // 目录遮罩层
      loading2: false, // 表格遮罩层
      asideStatus: true, // 侧边栏开关
      asideOpen: true, // 侧边栏按钮
      show: this.showDia, // 弹窗开关
      filterText: null, // 目录搜索关键字
      total: 0, // 表格数据总条数
      id: this.configIds,
      vueId: null,
      contentsData: [], // 目录数据
      tableData: [], // 表格数据
      pageForm: { // 页面对象
        pageNum: 1,
        pageSize: 10
      },
      setProps: {
        label: 'moduleCname',
        children: 'children'
      },
      moduleForm: { // 目录表单对象
        id: null,
        moduleName: null, // 不传值
        moduleCname: null,
        parentId: null,
        remark: null,
        createTime: null, // 不传值
        createBy: null, // 不传值
        updateBy: null, // 不传值
        updateTime: null // 不传值
      },
      infoParams: { // 接口查询表单对象
        pageNum: null,
        pageSize: null,
        id: null,
        apiName: null,
        apiCname: null,
        requestUrl: null,
        moduleId: null,
        apiStatus: null,
        requestMethod: null,
        requestParam: null
      },
      configForm: { // 应用接口配置表单
        app: {
          id: null,
          appId: null, // 不传值
          name: null,
          secKey: null, // 不传值
          mobile: null, // 不传值
          contact: null,
          remark: null,
          createTime: null, // 不传值
          createBy: null // 不传值
        },
        apiList: []
      },
      rules: { // 表单规则
        name: [
          { required: true, message: '应用名称不能为空', trigger: 'blur' }
        ],
        contact: [
          { required: true, message: '联系人不能为空', trigger: 'blur' }
        ],
        mobile: [
          { required: true, message: '联系电话不能为空', trigger: 'blur' },
          { validator: isNum, message: "联系电话必须为11位自然数", trigger: 'blur' }
        ],
        remark: [
          { required: true, message: '接入原因不能为空', trigger: 'blur' }
        ]
      }
    }
  },
  name: "config-api",
  watch: {
    filterText(val) {
      this.$refs.tree.filter(val)
    },
    showDia(val) {
      if (val === true) {
        this.initVue()
      }
    }
  },
  created() {
    this.initVue()
  },
  methods: {
    initVue() { // 初始化页面
      this.initForm()
      this.num = 0
      this.show = this.showDia
      this.id = this.configIds
      this.vueId = null
      this.pageForm.pageNum = 1
      this.pageForm.pageSize = 10
      this.getModuleData()
      this.getInfoData()
    },
    initForm() { // 重置所有表单对象
      this.configForm.app = {
        id: null,
        appId: null,
        name: null,
        secKey: null,
        mobile: null,
        contact: null,
        remark: null,
        createTime: null,
        createBy: null
      }
      this.configForm.apiList = []
    },
    asideChange() {
      this.asideStatus = !this.asideStatus 
      if (this.asideStatus) {
        this.asideOpen = true
      } else {
        this.asideOpen = false
      }
    },
    getRowKeys(row) {
      return row.id
    },
    filterNode(value, data) {
      if (!value) return true
      return data.moduleCname.indexOf(value) !== -1
    },
    getModuleData() { // 获取目录数据
      this.loading1 = true
      listModule().then(response => {
        this.contentsData = response.rows
        this.loading1 = false
      })
    },
    getInfoData() { // 获取表格数据
      this.loading2 = true
      this.infoParams.pageNum = this.pageForm.pageNum
      this.infoParams.pageSize = this.pageForm.pageSize
      listInfo(this.infoParams).then(response => {
        this.total = response.total
        this.tableData = response.rows
        if (this.num == 0) {
          this.num = 1
          if (this.id != null) {
            getConfig(this.id).then(response => {
              this.configForm.app = response.data.app
              this.configForm.apiList = response.data.apiList
              this.configForm.apiList.forEach(row => {
                getInfo(row).then(response => {
                  this.$refs.table.toggleRowSelection(response.data)
                })
              })
              this.getInfoData()
            })
          } else {
            this.loading2 =false
          }
        } else {
          this.loading2 = false
        }
      })
    },
    getShow() {
      this.$refs.table.clearSelection()
      return this.show
    },
    cancel() {
      this.show = false
      this.$emit('showChange', this.show)
    },
    handleSelectionChange(val) {
      const list = val
      this.configForm.apiList = []
      for (let index in list) {
        this.configForm.apiList.push(list[index].id)
      }
    },
    handleNodeClick(data) { // 点击目录节点
      this.vueId = data.id
      this.infoParams.moduleId = data.id
      this.getInfoData()
    },
    submitForm() {
      this.$refs["configForm"].validate(valid => {
        if (valid) {
          if (this.id == null) { // 新增
            addConfig(this.configForm).then(response => {
              this.cancel()
            })
          } else { // 编辑
            editConfig(this.configForm).then(response => {
              this.cancel()
            })
          }
        }
      })
    },
    handleCurrentChange() { // 切换页面
      this.infoParams.moduleId = this.vueId
      this.infoParams.pageNum = this.pageForm.pageNum
      this.infoParams.pageSize = this.pageForm.pageSize
      this.getInfoData()
    },
    handleSizeChange(val) { // 切换页面大小
      this.infoParams.moduleId = this.vueId
      this.pageForm.pageNum = 1
      this.pageForm.pageSize = val
      this.infoParams.pageNum = this.pageForm.pageNum
      this.infoParams.pageSize = this.pageForm.pageSize
      this.getInfoData()
    }
  }
}
</script>
<style>
.aside_open_close{
  position: relative;
  width: 18px;
  height: 60px;
  line-height: 60px;
  color: rgb(131,159,163);
  background-color: rgb(255, 255, 255);
  border-radius: 0 6px 6px 0;
  border: 1px rgb(198, 196, 196) solid;
  font-size: 20px;
  z-index: 1002;
  cursor: pointer;
}
</style>
